<template>
  <view class="page">
    <view class="tab_box">
    <img src="" alt="">
      <u-image width="64" height="64" src="../../static/img/schoolIcon.png"></u-image>
      <view class="tabs">
        <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
      </view>
    </view>
    <view v-if="current === 0" class="search flex a-center">
      <view class="search_item flex"  @click="handleJumpSearch">
        <view class="u-flex-col">
          <text class="u-font-lg bold">搜索学员</text>
          <text class="u-font-xs u-tips-color">输入学员信息</text>
        </view>
        <u-image width="98" height="98" src="../../static/img/all-icon-1.png"></u-image>
      </view>
      <view class="search_item flex" @click="handleJump">
        <view class="u-flex-col">
          <text class="u-font-lg bold">添加学员</text>
          <text class="u-font-xs u-tips-color">{{students}}位学员</text>
        </view>
        <u-image width="98" height="98" src="../../static/img/all-icon-2.png"></u-image>
      </view>
    </view>
    <view v-if="current === 0" class="student">
      <u-index-list :scrollTop="scrollTop" :sticky="false" :index-list="indexList">
        <view v-for="(item, index) in indexList" :key="index">
          <u-index-anchor :index="item" />
          <view
            class="student-item flex a-center"
            v-for="student in studentList[item]"
            @tap="toStudentDetail('/pages/student/information', student.id)"
          >
            <view class="touxiang">
              <image :src="student.avatar" />
            </view>
            <view class="info">
              <view
                class="title"
              >{{ student.name }} <span>（学号{{ student.student_number }}）</span>
              </view>
              <view class="text flex a-center">
                <span>{{ schoolName }}</span>
                <view class="integral">积分: {{ student.integration }}</view>
              </view>
            </view>
          </view>
        </view>
      </u-index-list>
    </view>
    <view v-if="current === 1" class="class">
      <view class="class_item flex u-col-center u-p-35" v-for="item in classList" @click="handleJumpIntegral(item)">
        <u-image width="98rpx" height="98rpx" radius="50%" src="../../static/img/avatar.png"></u-image>
        <view class="u-flex-1 u-flex-col u-m-l-32">
          <text class="class_name">{{ item.name }}</text>
          <text class="time">{{ item.desc }}</text>
        </view>
        <view class="right flex a-center">
          <text class="number">{{ item.num }}人</text>
          <u-icon name="arrow-right" color="#8F9399" size="28"></u-icon>
        </view>
      </view>
    </view>
    <custom-tabbar :index="1"></custom-tabbar>
  </view>
</template>

<script>
import { textToPy, pinyinSort } from '../../utils/index'

const app = getApp()

export default {
  data () {
    return {
      scrollTop: 0,
      indexList: [],
      studentList: [],
      list: [{
        name: '所有学员'
      }, {
        name: '班级'
      }],
      current: 0,
      classList: [],
      students: 0,
      schoolName: getApp().globalData.school.name, // 学校名字
    }
  },

  mounted () {
    // console.log('--', this.glbSchool.students)
    this.students = this.glbSchool.students.length
    this.init()
  },

  methods: {
    handleJumpSearch() { // 跳转到搜索学院的页面
      console.log('搜索')
      uni.navigateTo({
        url: `/pages/allStudent/searchPage`
      })
    },
    handleJumpIntegral(item) {
      uni.navigateTo({
        url: `/pages/home/addIntegral?id=${item.id}`
      })
    },
    handleJump() {
      uni.navigateTo({
        url: '/pages/student/addition'
      })
    },
    init () {
      // 初始化学生
      const list = this.school.students.map((item)=>({ ...item, pname: textToPy(item.name) }))
      const tempArr = pinyinSort(list)
      this.studentList = tempArr
      this.indexList = Object.keys(tempArr)
      this.classList = this.school.classs
    },

    change (index) {
      this.current = index;
    },

    toStudentDetail (path, id) {
      uni.navigateTo({
        url: `${path}?id=${id}`
      })
    },

    onPageScroll (e) {
      this.scrollTop = e.scrollTop - 114
    }
  }
}
</script>

<style lang="scss">
.fenlei {
  color: #fff;
  font-size: 50rpx;
}

.student {
  background-color: #fff;
  position: relative;
  padding-bottom: 100rpx;
  margin-top: 320rpx;
  background-color: #fff;
}

.tab_box {
  position: fixed;
  top: 0;
  z-index: 2;

  display: flex;
  align-items: center;

  height: 120rpx;
  padding: 0 68rpx;
  background-color: #fff;
  width: 100%;

  .u-image {
    margin-right: 30rpx;
  }

  .tabs {
    width: 300rpx;
  }
}

.search {
  display: flex;
  justify-content: space-between;

  padding: 0 30rpx;

  background-color: #fff;
  position: fixed;
  top: calc(120rpx);
  z-index: 2;
  height: 200rpx;
  width: 100%;

  .search_item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 320rpx;
    height: 150rpx;
    background-color: #F3F4F5;
    border-radius: 10rpx;
    padding: 0 30rpx;
  }
}

.studentList {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.student-item {
  width: 100%;
  padding: 10rpx 20rpx;

  .touxiang {
    width: 120rpx !important;
    height: 120rpx !important;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30rpx;
  }

  .touxiang image {
    width: 100%;
    height: 100%;
  }

  .info {
    flex: 1;

    .title {
      font-size: 32rpx;
      color: #303133;
      margin-bottom: 10rpx;
    }

    .title span {
      font-size: 24rpx;
    }

    .text {
      font-size: 24rpx;
      color: #303133;
    }

    .integral {
      margin-left: 65rpx;
      color: #2979ff;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
}

.class {
  padding-bottom: 100rpx;
  margin-top: 140rpx;

  .class_item {
    background-color: #fff;
    margin-bottom: 20rpx;

    .class_name {
      color: #040709;
      font-weight: bold;
      font-size: 32rpx;
    }

    .time {
      color: #606265;
      font-size: 24rpx;
    }

    .right {
      font-size: 22rpx;

      .number {
        margin-right: 12rpx;
      }
    }
  }
}
</style>
